<template>
    <div class="layout-padding" style="width: 100%;">
        <splitpanes horizontal>
            <pane size="50">
                <div class="layout-padding-auto layout-padding-view">
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true">
                        <el-form-item :label="$t('bar.receiptCode')">
                            <el-input v-model="state.queryForm.receiptCode" clearable :placeholder="$t('bar.receiptCode')" />
                        </el-form-item>
                        <el-form-item :label="$t('bar.materialcode')" prop="materialCode">
							<MaterialSelect v-model="state.queryForm.materialcode" style="width: 200px">
							</MaterialSelect>
						</el-form-item>
                        <el-form-item :label="$t('bar.receiptDate')" prop="receiptDate">
                            <div class="block">
                                <el-date-picker v-model="state.queryForm.createdate" clearable type="daterange"
                                    unlink-panels range-separator="To" start-placeholder="Start date"
                                    end-placeholder="End date" :shortcuts="shortcuts" />
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="search"  @click="query">{{ $t('bar.search')
                                }}</el-button>
                            <el-button  icon="refresh"  @click="resetQuery">{{ $t('bar.reset')
                                }}</el-button>
                            <el-button type="primary" icon="plus"  @click="onOpenAddMenu">{{ $t('bar.addNewBarcode') }}</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
                        style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
                        :header-cell-style="tableStyle.headerCellStyle" ref="tableRef" @row-click="clickRow">
                        <el-table-column type="selection" width="40" align="center" />
                        <el-table-column type="index" label="#" width="80" />
                        <el-table-column prop="receiptCode" :label="$t('bar.receiptCode')" show-overflow-tooltip width="200" />
                        <el-table-column prop="receiptLine" :label="$t('bar.receiptLine')" show-overflow-tooltip />
                        <el-table-column prop="materialCode" :label="$t('bar.materialcode')" show-overflow-tooltip />
                        <el-table-column prop="materialName" :label="$t('bar.materialname')" show-overflow-tooltip width="200"/>
                        <el-table-column prop="unit" :label="$t('bar.unit')" show-overflow-tooltip />
                        <el-table-column prop="warehouseCode" :label="$t('bar.warehousecode')" show-overflow-tooltip />
                        <el-table-column prop="warehouseName" :label="$t('bar.warehousename')" show-overflow-tooltip />
                        <el-table-column prop="qty" :label="$t('bar.realReceiptQty')" show-overflow-tooltip>
                            <template #default="scope">
                                <el-tag type="info" effect="plain">
                                    {{ scope.row.qty }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="scanQty" :label="$t('bar.scandQty')" show-overflow-tooltip >
                            <template #default="scope">
                                <el-tag type="primary" effect="plain">
                                    {{ scope.row.scanQty }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="instockQty" :label="$t('bar.instockQty')" show-overflow-tooltip >
                            <template #default="scope">
                                <el-tag type="success">
                                    {{ scope.row.instockQty }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="poCode" :label="$t('bar.poCode')" show-overflow-tooltip width="180"/>
                        <el-table-column prop="poLine" :label="$t('bar.poLine')" show-overflow-tooltip />
                    </el-table>
                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        v-bind="state.pagination" />
                </div>
                <MenuDialog @refresh="reloadBarcode" ref="menuDialogRef" />
            </pane>
            <pane size="50">
                <barcodeList ref="barcodeRef" />
            </pane>
        </splitpanes>
    </div>

</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { ref, reactive } from 'vue';
import { TabsPaneContext, ElMessage } from 'element-plus';
import { getReceiptDetails } from '/@/api/platform/wms/reprintbarcode';
import barcodeList from "../barcode/barcodeList.vue";
import { useI18n } from 'vue-i18n';
import MaterialSelect from "/@/components/mes/select/MaterialSelect.vue";
const { t } = useI18n();

const MenuDialog = defineAsyncComponent(() => import('../barcode/receiptBarcodes.vue'));

const getYMD = (date: any) => {
    // 获取年份
    const year = date.getFullYear();

    // 获取月份，注意JavaScript中的月份是从0开始的，因此需要+1
    const month = String(date.getMonth() + 1).padStart(2, '0');

    // 获取日期
    const day = String(date.getDate()).padStart(2, '0');

    // 拼接成 yyyy-MM-dd 格式的字符串
    const formattedDate = `${year}-${month}-${day}`;

    return formattedDate;
};
const today = new Date();
const endDate = new Date(today);
endDate.setDate(today.getDate() - 6); // 今天之后的6天，总共一周
today.setDate(today.getDate() + 1);
const createdate = ref([endDate, today]);
// 搜索变量
const queryRef = ref();
const tableRef = ref();
const barcodeRef = ref()
const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
        },
    },
];

//收料单表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {
        createdate: createdate,
        ReceiptDateStart: createdate.value ? getYMD(createdate.value[0]) : '',
        ReceiptDateEnd: createdate.value ? getYMD(createdate.value[1]) : '',
        IsGiveAway: '1'
    },
    pageList: getReceiptDetails,
});
const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle, downBlobFile } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
    createdate.value= [endDate, today];
    //重置收货单
    state.queryForm.receiptCode = null;
    //重置物料单号
    state.queryForm.materialCode = null;
    state.queryForm.CreateDateStart = createdate.value ? getYMD(createdate.value[0]) : '';
	state.queryForm.CreateDateEnd = createdate.value ? getYMD(createdate.value[1]) : '';
    getDataList(false);
};
const query = () => {
    state.queryForm.ReceiptDateStart = createdate.value ? getYMD(createdate.value[0]) : '';
    state.queryForm.ReceiptDateEnd = createdate.value ? getYMD(createdate.value[1]) : '';
    getDataList();
};
// 点击行的时候触发
const clickRow = (row: any) => {
    barcodeRef.value.query(row);
}
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = (type?: string, row?: any) => {
    var selectedAry = tableRef.value.getSelectionRows();
    if (selectedAry.length !=1) {
		ElMessage.error(t('bar.selectOneRow'));
		return;
    }
    menuDialogRef.value.openDialog(selectedAry[0],'ReceivingForPlay');
};
//新增标签后刷新该收料单的标签列表
const reloadBarcode=()=>{
    barcodeRef.value.query(tableRef.value.getSelectionRows()[0]);
}
</script>
